<script setup>

import {Back} from "@element-plus/icons-vue";
</script>

<template>
  <div>
    <h2>发票列表</h2>
    <div>
      <ul>
        <li>产品名称</li>
        <li>发票金额</li>
        <li>发票内容</li>
        <li>发票状态</li>
        <li>发票操作</li>
      </ul>
    </div>
    <div>
      <el-empty image="https://pic5.40017.cn/01/000/9f/92/rBLkBlplUkyATZt5AAAQLS8w0Pg739.png" description="暂无已申请的发票，快去看看想去哪里玩吧！" :image-size="80"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
h2{
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  padding: 15px 10px 0 10px;
  margin-bottom: 30px;
}
ul{
  display: flex;
  background: #f8f8f8;
  li{
    font-size: 14px;
    line-height: 36px;
    color: #999;
  }
  li:nth-of-type(1){
    padding-left: 18px;
    width: 250px;
  }
  li:nth-of-type(2){
    text-align: center;
    margin-left: 48px;
    width: 180px;
  }
  li:nth-of-type(3){
    text-align: center;
    width: 140px;
  }
  li:nth-of-type(4){
    text-align: center;
    width: 155px;
  }
  li:nth-of-type(5){
    text-align: center;
    width: 165px;
  }
}
</style>